import React, { useState, useEffect } from 'react'
import { Card, List, Button, Tag, Row, Col, Modal, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { UserOutlined, PhoneOutlined, EnvironmentOutlined, ClockCircleOutlined, ArrowLeftOutlined } from '@ant-design/icons'

interface Service {
  id: string
  name: string
  type: 'medical' | 'education' | 'transport' | 'financial' | 'other'
  provider: string
  contact: string
  address: string
  operatingHours: string
  description: string
  village: string
  rating: number
  status: 'available' | 'busy' | 'closed'
}

const RuralService: React.FC = () => {
  const navigate = useNavigate()
  const [services, setServices] = useState<Service[]>([])
  const [loading, setLoading] = useState(true)
  const [isContactModalVisible, setIsContactModalVisible] = useState(false)
  const [selectedService, setSelectedService] = useState<Service | null>(null)

  // mock数据 - 与后台管理模块关联
  useEffect(() => {
    const mockServices: Service[] = [
      {
        id: '1',
        name: '幸福村卫生室',
        type: 'medical',
        provider: '张医生',
        contact: '13800138001',
        address: '幸福村村委会旁',
        operatingHours: '08:00-17:00',
        description: '提供基础医疗服务、健康咨询和药品销售',
        village: '幸福村',
        rating: 4.5,
        status: 'available'
      },
      {
        id: '2',
        name: '和平村小学',
        type: 'education',
        provider: '王校长',
        contact: '13800138002',
        address: '和平村中心广场',
        operatingHours: '07:30-16:30',
        description: '提供小学教育服务，涵盖1-6年级课程',
        village: '和平村',
        rating: 4.8,
        status: 'available'
      },
      {
        id: '3',
        name: '乡村公交服务',
        type: 'transport',
        provider: '运输公司',
        contact: '13800138003',
        address: '各村公交站点',
        operatingHours: '06:00-18:00',
        description: '连接各村的公交服务，每小时一班',
        village: '所有村庄',
        rating: 4.2,
        status: 'available'
      },
      {
        id: '4',
        name: '农业技术指导站',
        type: 'other',
        provider: '赵技术员',
        contact: '13800138004',
        address: '幸福村农业合作社',
        operatingHours: '08:30-17:30',
        description: '提供农业技术指导、病虫害防治和种植技术培训',
        village: '幸福村',
        rating: 4.7,
        status: 'available'
      },
      {
        id: '5',
        name: '乡村金融服务点',
        type: 'financial',
        provider: '农村信用社',
        contact: '13800138005',
        address: '和平村商业街',
        operatingHours: '09:00-16:00',
        description: '提供存取款、贷款申请、理财咨询等金融服务',
        village: '和平村',
        rating: 4.6,
        status: 'available'
      },
      {
        id: '6',
        name: '农产品电商服务站',
        type: 'other',
        provider: '电商服务中心',
        contact: '13800138006',
        address: '富裕村电商产业园',
        operatingHours: '08:00-18:00',
        description: '提供农产品电商销售、包装、物流等一站式服务',
        village: '富裕村',
        rating: 4.9,
        status: 'available'
      },
      {
        id: '7',
        name: '乡村法律援助中心',
        type: 'other',
        provider: '法律援助中心',
        contact: '13800138007',
        address: '幸福村司法所',
        operatingHours: '08:30-17:00',
        description: '提供法律咨询、法律援助、纠纷调解等服务',
        village: '幸福村',
        rating: 4.8,
        status: 'available'
      },
      {
        id: '8',
        name: '乡村文化活动中心',
        type: 'other',
        provider: '文化站',
        contact: '13800138008',
        address: '和平村文化广场',
        operatingHours: '08:00-20:00',
        description: '提供图书借阅、文化活动、文艺演出等服务',
        village: '和平村',
        rating: 4.7,
        status: 'available'
      },
      {
        id: '9',
        name: '乡村就业服务中心',
        type: 'other',
        provider: '就业服务局',
        contact: '13800138009',
        address: '富裕村就业服务大厅',
        operatingHours: '08:30-17:30',
        description: '提供就业信息、技能培训、创业指导等服务',
        village: '富裕村',
        rating: 4.5,
        status: 'available'
      },
      {
        id: '10',
        name: '乡村快递服务站',
        type: 'transport',
        provider: '快递公司',
        contact: '13800138010',
        address: '各村快递点',
        operatingHours: '08:00-19:00',
        description: '提供快递收发、包裹寄存、物流配送等服务',
        village: '所有村庄',
        rating: 4.4,
        status: 'available'
      }
    ]

    setTimeout(() => {
      setServices(mockServices)
      setLoading(false)
    }, 1000)
  }, [])

  const handleContact = (service: Service) => {
    setSelectedService(service)
    setIsContactModalVisible(true)
  }

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'medical': return 'red'
      case 'education': return 'blue'
      case 'transport': return 'green'
      case 'financial': return 'orange'
      default: return 'default'
    }
  }

  const getTypeText = (type: string) => {
    switch (type) {
      case 'medical': return '医疗服务'
      case 'education': return '教育服务'
      case 'transport': return '交通服务'
      case 'financial': return '金融服务'
      default: return '其他服务'
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'available': return 'success'
      case 'busy': return 'warning'
      case 'closed': return 'error'
      default: return 'default'
    }
  }

  const getStatusText = (status: string) => {
    switch (status) {
      case 'available': return '可服务'
      case 'busy': return '忙碌中'
      case 'closed': return '已关闭'
      default: return status
    }
  }

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card 
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <Button 
              type="text" 
              icon={<ArrowLeftOutlined />} 
              onClick={() => navigate('/user-dashboard')}
              style={{ padding: '4px 8px' }}
            >
              返回
            </Button>
            <span>乡村服务</span>
          </div>
        }
        style={{ marginBottom: '24px' }}
        extra={
          <Button type="primary">
            服务申请
          </Button>
        }
      >
        <List
          loading={loading}
          dataSource={services}
          renderItem={service => (
            <List.Item
              actions={[
                <Button type="primary" onClick={() => handleContact(service)}>
                  联系服务
                </Button>
              ]}
            >
              <List.Item.Meta
                avatar={
                  <div style={{ 
                    width: 48, 
                    height: 48, 
                    borderRadius: '50%', 
                    background: '#1890ff', 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center',
                    color: 'white',
                    fontSize: '20px'
                  }}>
                    {service.name.charAt(0)}
                  </div>
                }
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                    <span>{service.name}</span>
                    <Tag color={getTypeColor(service.type)}>{getTypeText(service.type)}</Tag>
                    <Tag color={getStatusColor(service.status)}>{getStatusText(service.status)}</Tag>
                    <Tag color="orange">{service.village}</Tag>
                  </div>
                }
                description={
                  <div>
                    <p>{service.description}</p>
                    <Row gutter={16} style={{ marginTop: '8px' }}>
                      <Col span={6}>
                        <UserOutlined /> {service.provider}
                      </Col>
                      <Col span={6}>
                        <PhoneOutlined /> {service.contact}
                      </Col>
                      <Col span={6}>
                        <EnvironmentOutlined /> {service.address}
                      </Col>
                      <Col span={6}>
                        <ClockCircleOutlined /> {service.operatingHours}
                      </Col>
                    </Row>
                    <div style={{ marginTop: '8px' }}>
                      <span>评分: {service.rating} ★</span>
                    </div>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Card>

      {/* 联系服务弹窗 */}
      <Modal
        title="联系服务"
        open={isContactModalVisible}
        onCancel={() => {
          setIsContactModalVisible(false)
          setSelectedService(null)
        }}
        footer={[
          <Button key="cancel" onClick={() => {
            setIsContactModalVisible(false)
            setSelectedService(null)
          }}>
            取消
          </Button>,
          <Button key="call" type="primary" onClick={() => {
            message.success(`正在呼叫 ${selectedService?.contact}`)
            setIsContactModalVisible(false)
            setSelectedService(null)
          }}>
            立即拨打
          </Button>
        ]}
      >
        {selectedService && (
          <div>
            <p>您将联系以下服务：</p>
            <div style={{ padding: '12px', background: '#f0f9ff', borderRadius: '6px', marginTop: '12px' }}>
              <h4>{selectedService.name}</h4>
              <p><UserOutlined /> 服务提供者：{selectedService.provider}</p>
              <p><PhoneOutlined /> 联系电话：{selectedService.contact}</p>
              <p><EnvironmentOutlined /> 服务地址：{selectedService.address}</p>
              <p><ClockCircleOutlined /> 营业时间：{selectedService.operatingHours}</p>
            </div>
          </div>
        )}
      </Modal>
    </div>
  )
}

export default RuralService